<template>
	<view>
		<view class="bg" :style="{height:windowHeight+'px'}">
			<view class="flex zg">
				<view class="flex-colum-center" :style="{height:windowHeight+'px', width: '35%',overflow: 'auto'}">
					<view v-for="(item,index) in category" :key="index" :class="['ct',zindex==index?'ctactive':'']"
						@click="changetit(index,item)">
						{{item.title}}
					</view>
					<view style="height: .8333rem;width: 100%;"></view>
				</view>


				<view class=""
					style="width: 65%;height: 90vh;flex-wrap: wrap;margin: .5333rem .2667rem;overflow-y: scroll;">
					<view v-for="(item,index1) in products" :key="index1" class="pimg" @click="yulan(index1)">
						<image :src="item" alt="" class="w100" mode="widthFix" />
					</view>
					<view style="height: 1.3333rem;"></view>

				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		onShow() {
			this.windowHeight = uni.getSystemInfoSync().windowHeight
		},
		data() {
			return {
				windowHeight: 0,
				zindex: 0,
				category: [{
					title: '三年新会陈皮',
					src: ['/static/image/9.jpg']
				}, {
					title: '五年新会陈皮',
					src: ['/static/image/10.jpg']
				}, {
					title: '八年新会陈皮',
					src: ['/static/image/11.jpg']
				}, {
					title: '十年新会陈皮',
					src: ['/static/image/12.jpg']
				}, {
					title: '十二年新会陈皮',
					src: ['/static/image/13.jpg']
				}, {
					title: '十五年新会陈皮',
					src: ['/static/image/14.jpg']
				}, {
					title: '二年新会小青柑',
					src: ['/static/image/18.jpg']
				}, {
					title: '三年新会小青柑',
					src: ['/static/image/19.jpg', '/static/image/20.jpg']
				}, {
					title: '五年新会小青柑',
					src: ['/static/image/21.jpg', '/static/image/22.jpg']
				}, {
					title: '新会陈皮三宝扎',
					src: ['/static/image/23.jpg', '/static/image/24.jpg', '/static/image/25.jpg']
				}, {
					title: '新会陈皮零食',
					src: ['/static/image/26.jpg', '/static/image/27.jpg', '/static/image/28.jpg',
						'/static/image/29.jpg', '/static/image/30.jpg',
						'/static/image/31.jpg', '/static/image/32.jpg'
					]
				}, {
					title: '新会陈皮礼盒',
					src: ['/static/image/33.jpg', '/static/image/34.jpg', '/static/image/36.jpg']
				}, {
					title: '小青柑礼盒',
					src: ['/static/image/37.jpg', '/static/image/38.jpg']
				}],
				products: [
					'/static/image/9.jpg'
				],
				show: false,
				preindex: 0,
			}
		},
		methods: {
			changetit(index, item) {
				this.zindex = index
				this.products = item.src
				console.log('products', this.products);

			},
			yulan(index) {
				uni.previewImage({
					urls: this.products,
					current: index,
					indicator: 'number',
					loop: true
				})
			},
		}
	}
</script>

<style>

</style>